import React from 'react';
import './index.scss'
import { Link } from 'react-router-dom';
import RouterConfig from '../../router'

class Index extends React.Component {
    state = {
        isShow: false,
        title: '首页',
        nav: [
            {
                title: '首页',
                path: '/'
            },
            {
                title: '分类',
                path: '/cate'
            },
            {
                title: '推荐',
                path: '/tuijian'
            },
            {
                title: '我的',
                path: '/my'
            },
        ]
    }
    render() {
        let { isShow, title, nav } = this.state;
        return (
            <div className='box'>
                <div className="top">
                    <p onClick={() => {
                        this.setState({
                            isShow: !isShow
                        })
                    }}>三</p>
                    <p>{title}</p>
                </div>
                <div className="main">
                    <div className={isShow ? 'show left' : 'left'}>
                        <ul>
                            {nav.map((item, index) => {
                                return <li
                                    onClick={() => {
                                        this.setState({
                                            title: item.title
                                        })
                                    }}
                                    key={index}><Link to={item.path}>{item.title}</Link></li>
                            })}
                        </ul>
                    </div>
                    <div className="right">
                        {RouterConfig}
                    </div>
                </div>
            </div>
        )
    }
}
export default Index